import { memo, useCallback } from 'react';
import type { ReactNode, FC } from 'react';
import { CatListItemWrapper } from './style';
import { useAppDispatch } from '@/store/hooks';
import { setCurrentCat } from '../../store/songs';
interface IProps {
  children?: ReactNode;
  name: string;
  Lists: any[];
}

const CatListItem: FC<IProps> = (props) => {
  const { name, Lists } = props;
  const dispatch = useAppDispatch();

  return (
    <CatListItemWrapper>
      <dt className="name">
        <i className="icons icon"></i>
        {name}
      </dt>
      <dd className="info">
        {Lists.map((list) => {
          return (
            <div key={list.name}>
              <a
                onClick={(e) => {
                  e.preventDefault();
                  dispatch(setCurrentCat(list.name));
                }}
              >
                {list.name}
              </a>
              <span> | </span>
            </div>
          );
        })}
      </dd>
    </CatListItemWrapper>
  );
};

export default memo(CatListItem);
